<template>
  <div>
    <div class="cell" v-for="(item,idx) in list" :key="idx">
      <div class="left">
        <div class="icon">
          <img :src="item.icon" alt />
        </div>
        <div class="title">{{item.label}}</div>
        <div class="content">{{item.value}}</div>
        <div class="content2">{{item.value2}}</div>
      </div>
      <div class="right">
        <div class="status" v-if="item.isStatus">{{item.statusText === 'Y' ? '已实名' : '未认证'}}</div>
        <div class="link" v-if="item.isLink">
          <img
              src="https://akk.028wkf.cn/kdb-weapp-img/icon/xzlm.png"
              mode="scaleToFill"
            />
        </div>
        <div class="btn" v-if="item.isBtn" @click="handleBtn(item.event)">{{item.btnText}}</div>
      </div>
    </div>

    <div class="popup-window" :class="{show:showPopup}">
      <div class="popup-wrap" v-if="updateType==='phone'">
          <p class="label">原手机号</p>
          <input
            v-model="form.oldPhone"
            class="input-block"
            type="number"
            placeholder="请输入原手机号"
            placeholder-class="placeholder-part"
            maxlength="11"
          />
          <p class="label">新手机号</p>
          <input
            v-model="form.newPhone"
            class="input-block"
            type="number"
            placeholder="请输入新手机号"
            placeholder-class="placeholder-part"
            maxlength="11"
          />
          <p class="label">短信验证</p>
          <div class="input-field">
            <input
              v-model="form.code"
              class="input-block"
              type="text"
              placeholder="请输入验证码"
              placeholder-class="placeholder-part"
              maxlength="6"
            />
            <ButtonCloudMsg :phone="form.newPhone" :type="memberType" big />
          </div>
        <div class="btn-block">
          <button class="btn-footer green" size="mini" @click="handleChangePhone">确认</button>
          <button class="btn-footer" size="mini" @click="handleHide">取消</button>
        </div>
      </div>
      <div class="popup-wrap" v-if="updateType==='name'">
         <p class="label">云账户名称</p>
          <input
            v-model="cloud_account_name"
            class="input-block"
            placeholder="请输入云账户名称"
            placeholder-class="placeholder-part"
          />
          <div class="btn-block">
          <button class="btn-footer green" size="mini" @click="changeCloudAccountName">确认</button>
          <button class="btn-footer" size="mini" @click="handleHide">取消</button>
        </div>
      </div>
    </div>
  </div>
</template>
            
<script>
import ButtonCloudMsg from '@/components/ButtonCloudMsg'
import {
  YST_FIND_MEMBER_INFO,
  UPDATE_CLOUD_ACCOUNT_PHONE,
  UPDATE_CLOUD_ACCOUNT_NAME
} from '@/api'
export default {
  props: {},
  components: { ButtonCloudMsg },
  computed: {
    bindPhoneNumber () {
      return this.hideMsg(this.memberInfo.phone, 'mobile')
    },
    bindName () {
      return this.hideMsg(this.memberInfo.name, 'name')
    },
    userId () {
      return this.hideMsg(this.account.shopId, 'tag')
    },
    // 处理时间
    creteTime () {
      if (this.memberInfo.createDate) {
        return this.memberInfo.createDate.substring(
          0,
          this.memberInfo.createDate.indexOf(' ')
        )
      } else {
        return ''
      }
    },
    list () {
      return [
        {
          label: '实名认证',
          value: '',
          statusText: this.memberInfo.isIdentityChecked,
          isLink: true,
          isBtn: false,
          isStatus: true,
          icon: 'https://akk.028wkf.cn/kdb-weapp-img/cloud_auth.png',
          btnText: '',
          event: '',
          value2: ''
        },
        {
          label: '云账户名称：',
          value: this.memberInfo.alias,
          statusText: '',
          isLink: false,
          isBtn: true,
          isStatus: false,
          icon: 'https://akk.028wkf.cn/kdb-weapp-img/cloud_name.png',
          btnText: '更改',
          event: 'updateAlias',
          value2: ''
        },
        {
          label: '用户姓名：',
          value: this.bindName,
          statusText: '',
          isLink: false,
          isBtn: false,
          isStatus: false,
          icon: 'https://akk.028wkf.cn/kdb-weapp-img/cloud_user_name.png',
          btnText: '',
          event: '',
          value2: ''
        },
        {
          label: '用户状态：',
          value: this.newUserState[this.memberInfo.status],
          statusText: '',
          isLink: false,
          isBtn: false,
          isStatus: false,
          icon: 'https://akk.028wkf.cn/kdb-weapp-img/cloud_state.png',
          btnText: '',
          event: '',
          value2: '创建时间' + this.creteTime
        },
        {
          label: '绑定手机号：',
          value: this.bindPhoneNumber,
          statusText: '',
          isLink: false,
          isBtn: true,
          isStatus: false,
          icon: 'https://akk.028wkf.cn/kdb-weapp-img/cloud_name.png',
          btnText: '更改绑定手机',
          event: 'updatePhone',
          value2: ''
        },
        {
          label: '用户标识：',
          value: this.userId,
          statusText: '',
          isLink: false,
          isBtn: false,
          isStatus: false,
          icon: 'https://akk.028wkf.cn/kdb-weapp-img/cloud_tag.png',
          btnText: '',
          event: '',
          value2: ''
        },
        {
          label: '会员类型：',
          value: this.type[this.memberInfo.memberType],
          statusText: '',
          isLink: false,
          isBtn: false,
          isStatus: false,
          icon: 'https://akk.028wkf.cn/kdb-weapp-img/cloud_type.png',
          btnText: '',
          event: '',
          value2: ''
        }
      ]
    }
  },
  data () {
    return {
      memberInfo: {}, // 账户信息
      newUserState: {
        0: '待审核',
        1: '正常',
        2: '审核失败',
        3: '以锁'
      },
      type: {
        COMPANY: '企业会员账户',
        PERSONAL: '个人会员账户'
      },
      account: {},
      showPopup: false,
      form: {
        newPhone: '',
        oldPhone: '',
        code: ''
      },
      cloud_account_name: '', // 更改云账户名称
      updateType: '' // 更改手机号或云账户名称
    }
  },
  onShow () {
    this.account = this.$cookie.get('account')
    this.getAccountInfo()
  },
  methods: {
    getAccountInfo () {
      const vm = this
      let params = {
        identity: 'SHOP',
        relateId: vm.$cookie.get('account').shopId
      }
      YST_FIND_MEMBER_INFO(params)
        .then(r => {
          if (r.data.code === '0') {
            let memberInfo = r.data.data
            vm.memberInfo = r.data.data
            vm.$cookie.set('cloud-account-info', memberInfo)
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.info(e)
        })
    }, // 新云账户接口-查询是否开通了云账户
    hideMsg (msg, type) {
      if (!msg) {
        return ''
      }
      switch (type) {
        case 'mobile':
          return msg.match(/^\d{3}/)[0] + '****' + msg.match(/\d{4}$/)[0]
        case 'name':
          return msg.match(/^\S/)[0] + '**'
        case 'tag':
          // return msg.match(/^\S{4}/)[0] + '*******' + msg.match(/\S{4}$/)[0]
          return msg
        default:
          return new Array(9).join('*')
      }
    },
    handleBtn (eventName) {
      if (eventName === 'updateAlias') {
        this.updateType = 'name'
      } else if (eventName === 'updatePhone') {
        this.updateType = 'phone'
      }
      this.showPopup = true
    },
    handleHide () {
      this.showPopup = false
      setTimeout(() => {
        this.form = { newPhone: '' }
        this.cloud_account_name = ''
      }, 300)
    },
    handleChangePhone () {
      if (this.form.oldPhone && this.form.newPhone && this.form.code) {
        this.updateBindPhone()
      } else {
        this.$toast('请先完成表单')
      }
    },
    updateBindPhone () {
      const vm = this
      let params = {
        // bizUserId: vm.$store.state.account.shopId,
        // identity: 'SHOP',
        // relateId: vm.$store.state.account.shopId,
        relateId: vm.$cookie.get('account').shopId,
        ...vm.form
      }
      UPDATE_CLOUD_ACCOUNT_PHONE(params)
        .then(r => {
          if (r.data.code === '0') {
            vm.$toast('操作成功')
            vm.getAccountInfo()
          } else {
            vm.$toast(r.data.message)
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    changeCloudAccountName () {
      const vm = this
      if (vm.cloud_account_name) {
        let params = {
          identity: 'SHOP',
          relateId: vm.$cookie.get('account').shopId,
          alias: this.cloud_account_name
        }
        UPDATE_CLOUD_ACCOUNT_NAME(params)
          .then(r => {
            if (r.data.code === '0') {
              this.showPopup = false
              vm.getAccountInfo()
            } else {
              vm.$toast(r.data.message)
            }
          })
          .catch(e => {
            console.info(e)
          })
      } else {
        this.$toast('请填写云账户名称')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "static/styles/color.scss";

.cell {
  padding: 15px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  .left {
    display: flex;
    align-items: center;
    .icon {
      img {
        width: 17px;
        height: 17px;
      }
    }
    .title {
      margin-left: 10px;
      width: 100px;
    }
  }
  .right {
    display: flex;
    align-items: center;
    .link {
       img {
        width: 5px;
        height: 10px;
        margin-left: 5px;
      } 
    }
    .status {
      color: #1ff020;
      margin-right: 20px;
      font-weight: bold;
    }
    .btn {
      padding: 3px 6px;
      background: #5d94fb;
      color: #ffffff;
      border-radius: 20px;
    }
  }
  .content {
    color: #878787;
  }
  .content2 {
    color: #878787;
    margin-left: 10px;
  }
}
.popup-window {
  display: flex;
  justify-content: center;
  align-items: center;
  > .close {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 15px;
    right: 15px;
  }
  > .popup-wrap {
    background-color: $white;
    width: 280px;
    border-radius: 8px;
    padding: 15px;
    font-size: 15px;
    > .label {
      line-height: 200%;
    }
    .input-block {
      padding: 5px 10px;
      border: 1px solid $light-gray;
      border-radius: 4px;
    }
    > .input-field {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      > .input-block {
        width: calc(100% - 120px);
      }
    }
    > .btn-block {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 10px 0;
      > .btn-footer {
        width: 90px;
        height: 40px;
        line-height: 40px;
        font-size: 15px;
        margin: 0;
        &.green {
          background-color: $green;
        }
      }
    }
  }
}
</style>
